<template>
  <div id="shoppingCart">
    <div class="shop-container">
      <div class="current-position">
        <div class="pos">
          南京市
          <i>(当前位置)</i>
        </div>
      </div>
      <div class="goods">
        <div class="g1">
          <a href>沃尔玛-新街口店</a>
          <div class="g2">
            <ul class="g3">
              <li class="g4">
                <a href="#/goodsdetails">
                <img src='../image/shopping/gd1.jpg' alt>
                <span>￥54</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
     <Appfooter active='shopping'></Appfooter>
  </div>
</template>
<script>
export default {};
</script>
<style lang='scss' scoped>
* {
  margin: 0px;
  padding: 0px;
  font-weight: normal;
  font-style: normal;
}
a {
  text-decoration: none;
}
li {
  list-style-type: none;
}
#shoppingCart {
  width: 750px;
  .shop-container {
    padding-bottom: 188px;
    background-color: #f4f4f4;
    text-align: center;
    .current-position {
      padding: 12px 14px;
      margin: 30px 0px 20px 0px;
      background: #d1e7d3;
      border-radius: 64px;
      display: inline-block;
      .pos {
        display: inline-block;
        line-height: 44px;
        padding: 0px 28px 0px 62px;
        border-radius: 44px;
        font-size: 28px;
        color: #fff;
        background: #47b34f url("../image/shopping/loc2.png") 26px center
          no-repeat;
        background-size: 20px 24px;
      }
      .pos1{
          background: #666 url("../image/shopping/loc2.png") 26px center
          no-repeat;
           background-size: 15px 20px;
      }
    }
    .current-position2{
        background-color:#ccc;

    }
    .goods {
      margin: 0px 12px 14px 12px;
      height: 282px;
      padding: 6px 30px 20px 12px;
      background: url(../image/shopping/gc.png) no-repeat;
      background-size: 100% 308px;
      .g1{
          padding-left:8px;
          position: relative;
          a{
              display:block;
              height:294px;
              color:#333;
              font-size:30px;
              line-height:88px;
              text-align: left;
              background:url(../image/shopping/m.png) no-repeat right 34px;
              background-size:14px 22px;
          }
          .g2{
              height:184px;
              padding:2px 0px 0px 0px;
              position: absolute;
              top:80px;
              .g3{
                  height:184px;
                  .g4{
                      display: inline-block;
                      height:166px;
                      width:106px;
                      margin-top:28px;
                      padding-right:64px;
                      text-align:center;
                      font-size:24px;
                      line-height:60px;
                      color:#333;
                      img{
                          display: block;
                          width:106px;
                          height:106px;
                          border-radius: 10px;
                      }
                      span{
                          display: block;
                          font-size:20px;
                      }
                  }
              }
          }
      }
    }
  }
}
</style>

